import React from 'react'
import { withRouter } from 'react-router'
const BackendTag=['后端','Java','Python','Go','MySQL','算法','数据库','Redis','Spring Boot','Spring','Linux','Kubernetes','面试','架构','Spring Cloud']
const FrontendTag = ['前端','JavaScript','Vue.js','React.js','CSS','面试','算法','Webpack','Node.js','TypeScript','微信小程序','Flutter','HTML','浏览器','WebGL']
const AndroidTag = ['Android','前端','Flutter','Java','Kotlin','Android Jetpack','设计模式','架构','gradle','面试','性能优化','OpenCV','算法','源码','音视频开发']
const IOSTag = ['iOS','前端','Swift','Objective-C','Flutter','SwiftUI','面试','架构','逆向','RxSwift','macOS','安全','源码','算法','OpenGL']
const AiTag = ['人工智能','算法','MATLAB','机器学习','深度学习','后端','大数据','计算机视觉','Python','OpenCV','NLP','物联网','数据分析','百度','数据库']
const FreebieTag = ['前端','数据挖掘','GitHub','后端','Python','开源','Git','Docker','Linux','Unity3D','云计算','程序员','Java','Rust','游戏开发']
const CareerTag = ['程序员','算法','后端','前端','Python','面试','Java','测试','LeetCode','GitHub','代码规范','Linux','MATLAB','架构','C++']
const ArticleTag = ['程序员','前端','后端','笔记','设计模式','算法','产品','面试','数据库','测试','Java','Kubernetes','macOS','Flink','架构']
class SeniorBar extends React.Component{
    constructor(props){
        super(props)
        this.state={
            Tab:this.props.Tab,
            currentTag:this.props.Tag?this.props.Tag:null,
            Tag:[],
            index:0
        }
    }
    componentDidMount(){
        this.judgeSituation()
    }

    judgeSituation=()=>{
        if(this.state.Tab==='Backend')
            this.setState({
                Tag:BackendTag,
                index:20
            })
        else if(this.state.Tab==='Frontend')
            this.setState({
                Tag:FrontendTag,
                index:40
            })
        else if(this.state.Tab==='Android')
            this.setState({
                Tag:AndroidTag,
                index:60
            })
        else if(this.state.Tab==='IOS')
            this.setState({
                Tag:IOSTag,
                index:80
            })
        else if(this.state.Tab==='Ai')
            this.setState({
                Tag:AiTag,
                index:100
            })
        else if(this.state.Tab==='Freebie')
            this.setState({
                Tag:FreebieTag,
                index:120
            })
        else if(this.state.Tab==='Career')
            this.setState({
                Tag:CareerTag,
                index:140
            })
        else if(this.state.Tab==='Article')
            this.setState({
                Tag:ArticleTag,
                index:160
            })
    }
    render(){
        let onClickBackgroundColor = '#007fff'
        let onClickColor = '#fff'
        let backgroundColor = '#fff'
        let color = '#8a9aa9'
        return(
            <div>
                <div className='space' style={{width:375,height:106}}>

                </div>
                <div className='Bar' style={{width:375,height:10,backgroundColor:'#f4f5f5'}}>

                </div>
                <div className='SeniorBar' style={{width:375,height:122,backgroundColor:'#f4f5f5',display:this.state.Tab==='Recommend'?'none':'flex'}}>
                    <div className='space' style={{height:122,width:14}}>   

                    </div>
                    <div className='tagBar' style={{height:122,display:'flex',flexWrap:'wrap',width:351,fontSize:'13px'}}>
                        <div className='space' style={{height:24,width:10}}></div>
                        <div onClick={()=>this.props.history.push('/'+this.state.Tab)} style={{height:24,lineHeight:'24px',backgroundColor:this.state.currentTag===null?onClickBackgroundColor:backgroundColor,color:this.state.currentTag===null?onClickColor:color,textAlign:'center',padding:'0 10px 0 10px',borderRadius:'10px'}}>全部</div>
                        {
                            this.state.Tag.map((i,index)=>{
                                let target = this.state.Tab+'/'+i
                                return <div key={this.state.index+index} style={{display:'flex'}}>
                                    <div className='space'  style={{height:24,width:10}}></div>
                                    <div onClick={()=>this.props.history.push('/'+target)} style={{height:24,lineHeight:'24px',color:this.state.currentTag===i?onClickColor:color,backgroundColor:this.state.currentTag===i?onClickBackgroundColor:backgroundColor,textAlign:'center',padding:'0 10px 0 10px',borderRadius:'10px'}}>
                                        {i}
                                    </div>
                                </div>
                            })
                            
                        }
                    </div>
                </div>
            </div>
        )
    }
}
export default withRouter(SeniorBar)